$colors: (#026EFF, #00A445, #FFB000, #FF9300, #FF8F00, #FF662C, #1B9AEE, #C8EDFF, #0C8CFF, #0C8CFF, #0C8CFF, #0C8CFF, #0C8CFF, #0C8CFF);

html,body,ul{
    margin: 0;
    padding: 0;
}


header,footer{
    h1{
        line-height: 100vh;
        color: gray;
        text-align: center;
    }
}

.container-wraper{
    height: 300vh;
    background-color: #000;
    position: relative;
    .ani-container{
        height: 100vh;
        width: 100%;
        position: sticky;
        top: 0;
        left: 0;
        display: flex;
        .list{
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            width: 980px;
            position: relative;
            .item{
                width: 80px;
                height: 80px;
                margin: 60px 30px;
                border-radius: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
            }
            @for $i from 1 through length($colors){
                .item:nth-child(#{$i}){
                    background-color: nth($colors, $i);
                }
            }
        }
    }
}